<template>
  <div class="pagePersonalCenter">
    <headerT title="会员中心" />
    <div class="pageNormalBackground pagesMain" style="height:100vh">
      <div class="marginTop vipCenterMain">
        <div class="vipCard">
          <div class="displayFlex vipCard_level">
            <div class="level">会员等级</div>
            <div class="level_vip">VIP</div>
          </div>
          <div class="vip_level">初级会员</div>

          <div class="process">
            <div v-bind:style="{width: health+'%'}"></div>
          </div>
        </div>
        <div class="vipBg">
          <div class="vipBgTitle">会员专属特权</div>
          <div class="displayFlex vipNav">
            <div class>
              <img src="/static/images/vip-zxcp.png" />
              <p>专享产品</p>
            </div>
            <div>
              <img src="/static/images/vip-moreYh.png" />
              <p>更多优惠</p>
            </div>
            <div>
              <img src="/static/images/vip-back.png" />
              <p>生日礼包</p>
            </div>
          </div>
          <div class="application">
            <div class="applicationTitle">申请指南</div>
            <div class="applicationContent">
                <p>会员是商城和销售平台组织的人及单位，新会员级别共分为5个等级，分别为：注册会员、铜牌会员、银牌会员、金牌会员、钻石会员</p>
                <p>生日礼包</p>
                <p>1.银牌、金牌和钻石会员有机会得到生日礼包。</p>
                <p>2.会员获得生日礼包需验证手机号码。</p>
                <p>3.一个自然年内只能领取一次生日礼包，生日礼包有效期为15天，会员生日前7天开始发放。若有效期内未领取，不再补发生日礼包； 一个自然年内已领取过生日礼包的会员，后期修改生日也无法再次获得生日礼包</p>
                
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerT from "@/components/header";
export default {
  name: "login",
  components: {
    headerT
  },

  data() {
    return {
      health: 30 //进度
    };
  },

  watch: {},

  methods: {}
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
.everyBlockMargin {
  margin: 0.2rem 0.26rem;
}
.displayFlex {
  display: flex;
  align-items: center;
}
.marginTop {
  margin-top: 1rem;
}

.pagePersonalCenter {
  .vipCenterMain {
    height: 4.36rem;
    width: 100%;
    background: #3a3a3a;
    padding: 1.06rem 0.49rem 0 0.43rem;
    background-size: 100%;
    // position: relative;
    .vipCard {
      height: 3.66rem;
      // width: 92.5%;
      margin-top: 0.35rem;
      box-sizing: border-box;
      background-image: url("/static/images/vipJuBg.png");
      background-size: 100%;
      padding: 0.36rem 0.66rem 0rem 0.66rem;
      .vipCard_level {
        justify-content: space-between;
        color: #ffffff;
        .level {
          font-size: 0.3rem;
        }
        .level_vip {
          font-size: 0.49rem;
          opacity: 0.51;
          font-weight: bold;
        }
      }
      .vip_level {
        padding: 0.2rem 0;
        font-size: 0.54rem;
        color: #e6b566;
        font-weight: bold;
      }
      .process {
        height: 0.15rem;
        margin: 0.2rem auto;
        background: #ffffff;
        border-radius: 1rem;
        div {
          height: 0.15rem;
          background: rgba(252, 184, 80, 1);
          border-radius: 1rem;
        }
      }
    }
  }
  .vipBg {
    height: 19.88rem;
    width: 102%;
    background-image: url("/static/images/vipbg.png");
    background-size: 100%;
    position: absolute;
    top: 1.7rem;
    left: -0.1rem;
    z-index: 9;
    color: rgba(246, 202, 134, 1);
    .vipBgTitle {
      margin: 0.64rem 0.56rem;
      margin-top: 5.5rem;
      font-size: 0.28rem;
      text-align: center;
    }
    .vipNav {
     
      margin: 0.79rem 0.56rem;
      padding: 0 0.4rem;
      box-sizing: border-box;
      justify-content: space-between;
      text-align: center;
      font-size: 0.32rem;
      div {
        img {
          width: 1.67rem;
          height: 1.67rem;
        }
        p {
          margin: 0.38rem 0 0.2rem 0rem;
        }
      }
    }
    .application{
        // border: 1px solid red;
        box-sizing: border-box;
        background: #ffffff;
        margin:1rem 0.56rem;
        font-size: 0.32rem;
        
        padding: 0.62rem 0.37rem;
        .applicationTitle{
            font-size: 0.39rem;
            color: #F6CA86;
            font-weight:bold;
            text-align: center;
        }
        .applicationContent{
            padding: 0.8rem 0;
            color: #030202;
        }
    }
  }
}
</style>
